<template>
  <div class="" v-loading="loading">
    <el-form
      ref="form"
      size="mini"
      :model="form"
      label-position="top"
      class="myform"
    >
      <div>
        <el-form-item label="店铺:" class="myform-item">
          <el-select
            v-model="form.sellerid"
            placeholder="请选择开具发票的店铺"
            clearable
          >
            <el-option
              v-for="item in shoplist"
              :key="item.sellerid"
              :label="item.sellertitle"
              :value="item.sellerid"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单号:" class="myform-item">
          <el-input
            v-model="form.sourceidarr"
            placeholder="请输入订单号"
            @keyup.enter.native="onSearch"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="买家昵称:" class="myform-item">
          <el-input
            v-model="form.buyername"
            placeholder="请输入买家昵称"
            @keyup.enter.native="onSearch"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="抬头|税号:" class="myform-item">
          <el-input
            v-model="form.title"
            placeholder="请输入抬头或税号"
            @keyup.enter.native="onSearch"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item style="margin: 36px 10px 0">
          <el-button type="primary" @click="onSearch">查询</el-button>
          <!-- <el-button type="primary" @click="onAdd">新增面料</el-button> -->
        </el-form-item>
        <el-form-item style="margin-top: 36px">
          <!-- <el-button type="primary" @click="onAdd">新增面料</el-button> -->
        </el-form-item>
      </div>
    </el-form>

    <!-- <div style="margin: 10px 0">
      <div style="font-size: 14px; display: flex">
        后台开票状态：<el-checkbox-group v-model="form.invoicing_statusarr">
          <el-checkbox
            v-for="item in cities"
            :key="item.invoicing_status"
            :label="item.value"
            >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
    </div> -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      style="width: 100%"
      height="400"
      @selection-change="handleSelectionChange"
      border
      size="mini"
    >
      <el-table-column type="selection" width="55" fixed v-if="isH == 1">
      </el-table-column>
      <el-table-column width="60" align="center" fixed v-if="isH == 2">
        <template slot-scope="{ row }">
          <el-radio v-model="radioD" :label="row" @input="onInputDD(row)"
            ><span style="visibility: hidden"></span
          ></el-radio>
        </template>
      </el-table-column>
      <el-table-column
        label="订单号"
        align="center"
        prop="sourceid"
        width="170"
        fixed
      >
      </el-table-column>
      <el-table-column
        label="订单状态"
        align="center"
        prop="order_status"
        width="100"
      >
      </el-table-column>
      <el-table-column
        label="任务状态"
        align="center"
        prop="status"
        width="100"
      >
        <template slot-scope="{ row }">
          <div
            :style="{
              color:
                row.status == 1
                  ? '#67C23A'
                  : row.status == 2
                  ? '#E6A23C'
                  : row.status == 0
                  ? '#F56C6C'
                  : '',
            }"
          >
            {{
              row.status == 1
                ? "已完成"
                : row.status == 0
                ? "待处理"
                : row.status == 2
                ? "处理中"
                : row.status == 3
                ? "暂停中"
                : ""
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="是否需开票"
        align="center"
        prop="is_status"
        width="100"
      >
        <template slot-scope="{ row }">
          <div
            :style="{
              color: row.hongchong_status == 1 ? '#999999' : '',
            }"
          >
            {{
              row.hongchong_status == 1
                ? "无需开票"
                : row.hongchong_status == 2
                ? "需开票"
                : ""
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="后台发票状态"
        align="center"
        prop="invoicing_status"
        width="100"
      >
        <template slot-scope="{ row }">
          <div
            :style="{
              color:
                row.invoicing_status == 1
                  ? '#67C23A'
                  : row.invoicing_status == 2
                  ? '#F56C6C'
                  : row.invoicing_status == 3
                  ? '#E6A23C'
                  : row.invoicing_status == 4
                  ? '#2c70d6'
                  : '',
            }"
          >
            {{
              row.invoicing_status == 1
                ? "已开票"
                : row.invoicing_status == 2
                ? "开票失败"
                : row.invoicing_status == 3
                ? "申请冲红"
                : row.invoicing_status == 4
                ? "冲红成功"
                : row.invoicing_status == 5
                ? "冲红失败"
                : row.invoicing_status == 0
                ? "未开票"
                : ""
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="发票类型"
        align="center"
        prop="invoice_headerid"
        width="80"
      >
        <template slot-scope="{ row }">
          {{ row.invoice_headerid == 900 ? "个人" : "公司" }}
        </template>
      </el-table-column>

      <el-table-column label="开票信息" align="center">
        <el-table-column label="抬头/税号" align="center" width="250">
          <template slot-scope="{ row }">
            {{ row.invoice_header || "--" }} /
            {{ row.invoicing_number || "--" }}
          </template>
        </el-table-column>
        <el-table-column label="地址/电话" align="center" width="250">
          <template slot-scope="{ row }">
            {{ row.opening_bank_address || "--" }} /
            {{ row.opening_bank_tel || "--" }}
          </template>
        </el-table-column>
        <el-table-column label="开户行/账号" align="center" width="250">
          <template slot-scope="{ row }">
            {{ row.opening_bank || "--" }} /
            {{ row.opening_bank_number || "--" }}
          </template>
        </el-table-column>
        <el-table-column
          label="客服备注"
          align="center"
          prop="notes"
          width="100"
        >
        </el-table-column>
      </el-table-column>
      <el-table-column label="电子邮箱" align="center" prop="email" width="160">
      </el-table-column>
      <el-table-column label="店铺" align="center" prop="sellerid" width="140">
        <template slot-scope="{ row }">
          {{ row.sellerid | shopfilters() }}
        </template>
      </el-table-column>
      <el-table-column label="买家昵称" align="center" prop="buyername">
      </el-table-column>
      <el-table-column label="实付金额" align="center" prop="pay_amount">
      </el-table-column>

      <el-table-column label="开票商品" align="center" width="1000">
        <template slot-scope="{ row }">
          <el-table border :data="row.order_detail" size="mini">
            <el-table-column
              label="子订单号"
              align="center"
              width="180"
              prop="son_order_no"
            >
            </el-table-column>
            <el-table-column
              label="商品标题"
              align="center"
              prop="product_name"
            >
            </el-table-column>
            <el-table-column label="购买数量" align="center" prop="num">
            </el-table-column>
            <el-table-column
              label="子订单号实付金额"
              align="center"
              prop="pay_amount"
            >
            </el-table-column>
            <el-table-column label="货品编号" align="center" prop="sku_code">
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>

      <el-table-column
        label="创建人"
        align="center"
        prop="adduserid"
        width="100"
      >
      </el-table-column>

      <el-table-column
        label="执行人"
        align="center"
        prop="douserid"
        width="100"
      >
      </el-table-column>
      <el-table-column
        label="创建时间"
        align="center"
        prop="addtime"
        width="160"
      >
      </el-table-column>
      <el-table-column
        label="修改时间"
        align="center"
        prop="updatetime"
        width="160"
      >
      </el-table-column>
    </el-table>
    <pagination
      :form="form"
      :total="total"
      @paginationPostOrderTaskList="postAdminBanNiuRequestInvoicelist"
    />
  </div>
</template>
    
  <script>
import { getStore } from "@/utils/localStorage.js";
import {
  postAdminBanNiuRequestInvoicelist,
  postAdminBanNiuGetInvoiceShop,
} from "@/api";
import pagination from "@/components/pagination.vue";
let that = this;
export default {
  components: { pagination },
  props: {
    isH: 1,
  },
  beforeCreate() {
    that = this;
  },
  filters: {
    shopfilters(val) {
      let shoplist = that.shoplist;
      let index = shoplist.map((item) => item.sellerid).indexOf(val);
      return shoplist[index].sellertitle;
    },
  },
  data() {
    return {
      loading: false,
      radioD: "",
      cities: [
        {
          label: "未开票",
          value: "0",
        },
        {
          label: "开票失败",
          value: "2",
        },
        {
          label: "已开票",
          value: "1",
        },
        {
          label: "申请冲红",
          value: "3",
        },
        {
          label: "已冲红",
          value: "4",
        },
        {
          label: "冲红失败",
          value: "5",
        },
      ],
      checkedCities: ["未开票", "开票失败"],
      shoplist: this.shoplist,
      form: {
        sellerid: "",
        sourceidarr: "",
        buyername: "",
        title: "",
        groups: this.isH,
        invoicing_status: this.isH == 2 ? 3 : "",
        type: 1,
        page: 1,
        size: 10,
      },
      tableData: [],
      total: 1,
      row: "",
      multipleSelection: [],
    };
  },

  async mounted() {
    let form = this.form;

    await this.postAdminBanNiuGetInvoiceShop();
    await this.postAdminBanNiuRequestInvoicelist(form);

    // this.userinfo = getStore("userinfo");
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.multipleTable.doLayout();
    });
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.$emit("onMultipleSelection", val);
    },
    onInputDD(val) {
      this.multipleSelection = val;
      this.$emit("onMultipleSelection", val);
    },
    // 店铺列表
    async postAdminBanNiuGetInvoiceShop() {
      let res = await postAdminBanNiuGetInvoiceShop();
      this.shoplist = res.data;
    },

    // 列表
    async postAdminBanNiuRequestInvoicelist(data) {
      this.loading = true;
      let shoplist = this.shoplist;
      this.form = data;
      // data = JSON.parse(JSON.stringify(data));
      // let date = data.str_add_date;
      // if (date) {
      //     if (Array.isArray(date)) {
      //         data.str_add_date = date[0];
      //         data.end_add_date = date[1];
      //     }
      // } else {
      //     this.form.str_add_date = "";
      //     this.form.end_add_date = "";
      // }
      let datas = JSON.parse(JSON.stringify(data));
      let sourceidarr = datas.sourceidarr;
      if (sourceidarr) {
        datas.sourceidarr = sourceidarr.split(",");
      } else {
        datas.sourceidarr = [];
      }
      postAdminBanNiuRequestInvoicelist(datas)
        .then((res) => {
          this.loading = false;
          let data = res.data;

          //   for (let index = 0; index < data.length; index++) {
          //     console.log('data---->',data[index].sellerid);
          //     let index = shoplist
          //       .map((item) => item.sellerid)
          //       .indexOf(data[index].sellerid);
          //     data.shopname = shoplist[index].sellertitle;
          //   }

          this.tableData = data;
          this.total = Number(res.total);
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 搜索
    onSearch() {
      this.form.page = 1;
      this.radioD = "";
      this.onInputDD([]);
      this.postAdminBanNiuRequestInvoicelist(this.form);
    },
  },
};
</script>
    
  <style lang="scss" scoped>
.myform {
  display: flex;
  justify-content: space-between;

  > div {
    display: flex;
  }

  &-item {
    margin-right: 10px;
  }
}
</style>
    